body {
    height: 5000px;
}

.float1 {
    display: flex;
    margin-bottom: 10px;
    height: 100px;
    background-color: pink;
}

.float1 div:nth-child(1) {
    width: 30%;
    height: 100px;
    background-color: bisque;
}

.float1 div:nth-child(2) {
    width: 70%;
    height: 100px;
    background-color: skyblue;
}

.float2 {
    display: flex;
    margin-bottom: 10px;
    height: 100px;
    background-color: pink;
}

.float2 div:nth-child(1) {
    width: 100px;
    height: 100px;
    background-color: bisque;
    flex: 0 0 auto;
}

.float2 div:nth-child(2) {
    height: 100px;
    background-color: skyblue;
    /* 占满剩余的位置 */
    /* flex: 1; */
    flex: 1 1 auto;
}

.float3 {
    display: flex;
    margin-bottom: 10px;
    height: 100px;
    background-color: pink;
}

.float3 div:nth-child(1) {
    background-color: skyblue;
    height: 100px;
    flex: 1 1 auto;
}

.float3 div:nth-child(2) {
    width: 100px;
    height: 100px;
    background-color: bisque;
    flex: 0 0 100px;
}

.float4 {
    display: flex;
    margin-bottom: 10px;
    height: 100px;
    background-color: pink;
}

.float4 div:nth-child(1) {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    background-color: palevioletred;
}

.float4 div:nth-child(2) {
    flex: 2 2 auto;
    background-color: skyblue;
    height: 100px;
}

.float4 div:nth-child(3) {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    background-color: bisque;
}

.float5 {
    display: flex;
    margin-bottom: 10px;
    height: 100px;
    background-color: pink;
}

.float5 div:nth-child(1) {
    background-color: bisque;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
}

.float5 div:nth-child(2) {
    background-color: skyblue;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
}

.float5 div:nth-child(3) {
    background-color: palevioletred;
    height: 100px;
    flex: 1 1 auto;
}